<template>
  <div id="luggage-info-list" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item ms-1" aria-current="page">基础数据</li>
        <li class="breadcrumb-item active" aria-current="page">
          {{ carrier0 }} 行李信息
        </li>
      </ol>
    </nav>
    <template v-if="isSearchMode">
      <div class="card-body">
        <form>
          <div class="row mb-2">
            <input
              type="textfield"
              class="form-control"
              placeholder="航空公司"
              v-model.trim="carrier0"
            />
          </div>
          <div class="row mb-2">
            <button
              type="button"
              class="btn btn-primary mb-2"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              @click.stop="resetSearch()"
            >
              重置
            </button>
          </div>
        </form>
      </div>
    </template>
    <template v-else>
      <div class="card-body py-1">
        <button
          type="button"
          class="btn btn-primary"
          @click.stop="showSearch()"
        >
          查找
        </button>
        <a
          href="javascript:void(0)"
          class="ms-1"
          @click.stop="quickSearch('MU')"
          >MU</a
        >
        <a
          href="javascript:void(0)"
          class="ms-1"
          @click.stop="quickSearch('CZ')"
          >CZ</a
        >
        <a
          href="javascript:void(0)"
          class="ms-1"
          @click.stop="quickSearch('CA')"
          >CA</a
        >
        <template v-if="isDataAdmin">
          <a
            href="javascript:void(0)"
            class="btn btn-success float-end"
            @click="newLuggageInfo()"
            >新建</a
          >
        </template>
      </div>

      <table class="table table-striped table-sm" v-if="dataList.length > 0">
        <thead>
          <tr>
            <th class="text-center">行李类型</th>
            <th class="text-center">舱位等级</th>
            <th class="text-center">标题</th>
            <th class="text-center d-none d-md-table-cell">免费行李额</th>
            <th class="text-center d-none d-md-table-cell">体积限定/件</th>
            <th class="text-center d-none d-md-table-cell">重量限定/件</th>
            <th class="text-center d-none d-md-table-cell">备注</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(info, index) in dataList"
            :key="index"
            @click.stop="showDetail(info.id)"
          >
            <td class="text-center">
              <span v-if="info.luggageType === 0" class="small">托运</span>
              <span v-if="info.luggageType === 1" class="small">非托运</span>
            </td>
            <td class="text-center">
              <span v-if="info.cabinType === 10" class="small">头等舱</span>
              <span v-if="info.cabinType === 20" class="small">商务舱</span>
              <span v-if="info.cabinType === 30" class="small">经济舱</span>
              <span v-if="info.cabinType === 40" class="small">超级经济舱</span>
            </td>
            <td class="text-center">{{ info.title }}</td>
            <td class="text-center d-none d-md-table-cell">
              {{ info.freeLimit }}
            </td>
            <td class="text-center d-none d-md-table-cell">
              {{ info.volumeLimit }}
            </td>
            <td class="text-center d-none d-md-table-cell">
              {{ info.weightLimit }}
            </td>
            <td class="text-center d-none d-md-table-cell">
              {{ info.remark }}
            </td>
            <td>
              <!-- <a href="javascript:void(0)" v-on:click="editSubclass(index)">修改</a>
            <a href="javascript:void(0)" v-on:click="copySubclass(index)" class="ms-2">复制</a> -->
              <i class="mdi mdi-arrow-right fa-2"></i>
            </td>
          </tr>
        </tbody>
      </table>
      <nav id="pagination-box" class="float-end">
        <my-pagination
          name="pagination"
          :row-count="sc.rowCount"
          :page-total="sc.pageTotal"
          :page-no="sc.pageNo"
          @next-page="nextPage"
          @prev-page="prevPage"
          @direct-page="directPage"
        ></my-pagination>
      </nav>
    </template>
  </div>
</template>

<script>
import MyPagination from "@/components/my-pagination.vue";
import $ from "jquery";
import {
  searchLuggages,
  saveLuggageInfo,
  searchFlightConditionTimeWindow,
  saveFlightConditionTimeWindow,
} from "@/api/basic-data.js";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      isSearchMode: false,
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },
      carrier0: "MU",
      subclass0: "",

      id: 0,
      carrier: "",
      luggageType: 0,
      cabinType: 30,
      freeLimit: "",
      volumeLimit: "",
      weightLimit: "",
      remark: "",
      title: "",

      dataList: [],

      keepInputing: false,
      inputing: false,
    };
  },
  computed: {
    isDataAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showSearch: function () {
      this.isSearchMode = true;
    },
    quickSearch: function (carrier) {
      this.carrier0 = carrier;
      this.search();
    },
    search: function () {
      if (this.carrier0.length != 2) {
        this.showErrMsg("请先输入航司代码");
        return;
      }
      this.isSearchMode = false;
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.carrier": this.carrier0,
      };
      searchLuggages(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    reset: function () {
      this.id = 0;
      this.carrier = "";
      this.cabinType = 30;
      this.luggageType = 0;
      this.title = "";
      this.freeLimit = "";
      this.volumeLimit = "";
      this.weightLimit = "";
      this.remark = "";
    },
    newLuggageInfo: function () {
      this.$router.push("/h5/data/luggage?carrier=" + this.carrier0);
    },
    showDetail: function (id) {
      this.$router.push("/h5/data/luggage/" + id);
    },
    closeInput: function () {
      this.inputing = false;
    },
    saveLuggageInfo: function () {
      const params = {
        id: this.id,
        carrier: this.carrier,
        cabinType: this.cabinType,
        luggageType: this.luggageType,
        title: this.title,
        freeLimit: this.freeLimit,
        volumeLimit: this.volumeLimit,
        weightLimit: this.weightLimit,
        remark: this.remark,
      };

      // console.log(params)

      saveLuggageInfo(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          if (this.keepInputing === false) {
            // $('#modalNew').modal('hide')
            this.inputing = false;
          }

          this.search();
          this.showErrMsg("保存成功");
        } else {
          this.showErrMsg(jsonResult.errmsg);
        }
      });
    },
    editSubclass: function (index) {
      const info = this.dataList[index];

      this.id = info.id;
      this.carrier = info.carrier;
      this.luggageType = info.luggageType;
      this.cabinType = info.cabinType;
      this.title = info.title;
      this.freeLimit = info.freeLimit;
      this.volumeLimit = info.volumeLimit;
      this.weightLimit = info.weightLimit;
      this.remark = info.remark;

      this.keepInputing = false;

      this.inputing = true;
    },
    copySubclass: function (index) {
      this.editSubclass(index);
      this.id = 0;
    },
    showFeeRateDesc: function (feeRate) {
      if (feeRate == 0) {
        return "免费";
      } else {
        return feeRate + "%";
      }
    },
    showAllowDesc: function (status) {
      if (status === 0) {
        return "不允许";
      } else if (status === 1) {
        return "允许";
      } else {
        return status;
      }
    },
    resetSearch: function () {
      this.carrier0 = "";
      this.subclass0 = "";

      this.sc.pageNo = 1;
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
